<template>
  <div class="dd">
    <Card title="业务介绍">
      <p>网络专线主要有两种信道：</p>
      <p>
        物理专用信道:物理专用信道就是在服务商到用户之间铺设有一条专用的线路，线路只给用户独立使用，其他的数据不能进入此线路，
        而一般的线路就允许多用户共享信道；
      </p>
      <p>
        虚拟专用信道:虚拟专用信道就是在一般的信道上为用户保留一定的带宽，使用户可以独享这部分带宽，就像在公用信道上又开了一个
        通道，只让相应用户使用，而且用户的数据是加密的，以此来保证可靠性与安全性；
      </p>
      <p>
        主要专用线道帧中继（Frame Relay）、数字数据网（DDN Digital Data
        Network）、异步传输模式（ATM Asynchronous Transfer Mode）、
        X.25（分组交换业务网）、第三代ADSL（非对称用户数字链路）、虚拟专用网络（VPN
        Virtual Private Network）以及E1等。
      </p>
    </Card>
    <Card title="基本信息">
      <el-form size="small" inline label-width="120px" :model="formA">
        <el-form-item label="客户名称">
          <el-input v-model="formA.valA"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="hanleClick"
            >选取客户</el-button
          >
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="formA.valB"></el-input>
        </el-form-item>
        <el-form-item label="客户所在省">
          <el-input v-model="formA.valC"></el-input>
        </el-form-item>
        <el-form-item label="客户所在市">
          <el-input v-model="formA.valD"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formA.valE"></el-input>
        </el-form-item>
      </el-form>
    </Card>
    <Card title="业务信息">
      <div slot="cRight" style="display: flex">
        <el-button type="primary" size="small" style="margin-right: 10px">
          <a href="http://119.23.15.173/down/Model.xlsx"> 模板下载 </a>
        </el-button>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-change="onChange"
        >
          <el-button size="small" type="primary">批量上传</el-button>
        </el-upload>
      </div>
      <Table :tableData="tableData" />
    </Card>
    <Card title="其他信息">
      <el-form size="small" inline label-width="130px" :model="formB">
        <el-form-item label="客户经理名称">
          <el-input v-model="formB.valA"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formB.valB"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formB.valC"></el-input>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="formB.valD"></el-input>
        </el-form-item>
        <el-form-item label="维护方式">
          <el-input v-model="formB.valE"></el-input>
        </el-form-item>
        <el-form-item label="维护人员联系方式">
          <el-input v-model="formB.valF"></el-input>
        </el-form-item>
      </el-form>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },

  data() {
    return {
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: '',
        valF: ''
      },
      show: false,
      checkedVal: '',
      valGroup: [
        '标准收费',
        '按时收费（每分钟0.1元）',
        '按天计费（每天1元）',
        '包月收费（100元1000分钟）',
        '语音次数限制'
      ],
      checkedValB: [],
      valGroupB: ['测试期资费'],
      checkedValA: [],
      valGroupA: ['集团固话', '多媒体会议', '语音会议', '定向流量'],
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '办理部门'
          },
          {
            prop: 'colC',
            label: '接入协议'
          },
          {
            prop: 'colD',
            label: '最大延时'
          },
          {
            prop: 'colE',
            label: '最大兆宽'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            btnList: [{ label: '复制' }, { label: '删除' }]
          }
        ],
        row: []
      }
    }
  },

  methods: {
    hanleClick() {
      this.$emit('hanlePer', true)
    },
    onChange() {
      this.tableData.row = [
        {
          colA: '3857',
          colB: '市场部',
          colC: 'CMPP3.0',
          colD: '100MS',
          colE: '300'
        },
        {
          colA: '3858',
          colB: '市场部',
          colC: 'CMPP3.0',
          colD: '100MS',
          colE: '400'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
.el-checkbox-group {
  display: inline-block;
  margin-left: 20px;
}
a {
  text-decoration: none;
  color: #ffffff;
}
</style>
